 <div class="col-lg-6">
	<div class="panel panel-default">
		<div class="panel-body" style = "background: #CEE3F6">
			<div class="col-xs-12"><h2>Nuevo Rol</h2><br/></div>
			<div class="col-xs-12">
				<form id ="myForm" role="form" action="insertar_registro.php" onsubmit="return validar()" method="post">
					<div class="form-group col-xs-4" id="cedula">
						<label>Cédula&nbsp;<span class="glyphicon glyphicon-asterisk" style="font-size: 0.8em;"/></label>
						<input type="text" class="form-control" name="cedula" required>
					</div>
					<div class="form-group col-xs-8">
						<label>Rol&nbsp;<span class="glyphicon glyphicon-asterisk" style="font-size: 0.8em;"/></label>
						<select class="form-control" id="tipoRol" name ="tipoRol" required>
							<option></option>
							<option>Coordinador de Centro</option>
							<option>Coordinador de Materia</option>
							<option>Jefe de Departamento</option>
						</select>
					</div>
					<div class="col-xs-12"></div>
					<div class="form-group col-xs-3" id="fecha_inicio_dia">
						<label>Desde&nbsp;<span class="glyphicon glyphicon-asterisk" style="font-size: 0.8em;"/></label>
						<input type="number" class="form-control" min="1" max="31" name="fecha_inicio_dia" placeholder="Día" required>
					</div>
					<div class="form-group col-xs-6" id="fecha_inicio_mes">
						<label>&nbsp;</label>
						<select class="form-control" name ="fecha_inicio_mes" value="Mes" required>
							<option value="" disabled selected style="display:none;">Mes</option>
							<option value="1">Enero</option>
							<option value="2">Febrero</option>
							<option value="3">Marzo</option>
							<option value="4">Abril</option>
							<option value="5">Mayo</option>
							<option value="6">Junio</option>
							<option value="7">Julio</option>
							<option value="8">Agosto</option>
							<option value="9">Septiembre</option>
							<option value="10">Octubre</option>
							<option value="11">Noviembre</option>
							<option value="12">Diciembre</option>
						</select>
					</div>
					<div class="form-group col-xs-3" id="fecha_inicio_año">
						<label>&nbsp;</label>
						<input type="number" class="form-control" min="2000" max="2100" name="fecha_inicio_año" placeholder="Año" required>
					</div>
					<div class="col-xs-12"></div>
					<div class="form-group col-xs-3" id="fecha_fin_dia">
						<label>Hasta</label>
						<input type="number" class="form-control" min="1" max="31" name="fecha_fin_dia" placeholder="Día">
					</div>
					<div class="form-group col-xs-6" id="fecha_fin_mes">
						<label>&nbsp;</label>
						<select class="form-control" name ="fecha_fin_mes" value="Mes">
							<option value="" disabled selected style="display:none;">Mes</option>
							<option value="1">Enero</option>
							<option value="2">Febrero</option>
							<option value="3">Marzo</option>
							<option value="4">Abril</option>
							<option value="5">Mayo</option>
							<option value="6">Junio</option>
							<option value="7">Julio</option>
							<option value="8">Agosto</option>
							<option value="9">Septiembre</option>
							<option value="10">Octubre</option>
							<option value="11">Noviembre</option>
							<option value="12">Diciembre</option>
						</select>
					</div>
					<div class="form-group col-xs-3" id="fecha_fin_año">
						<label>&nbsp;</label>
						<input type="number" class="form-control" min="2000" max="2100" name="fecha_fin_año" placeholder="Año">
					</div>
					<div class="form-group col-xs-4">
			          	</br><label><span class="glyphicon glyphicon-asterisk" style="font-size: 0.8em;"/>&nbsp;Campos obligatorios</label>
					</div>
					<div class="col-xs-12"></br></div>
					<div class="col-xs-4"></div>
					<div class="col-xs-4">	
						<button type="submit" id="agregar" class="btn btn-primary form-control">Agregar</button>
					</div>
					<div class="col-xs-4"></div>
					<div class="col-xs-12"></br></div>
					<input type="hidden" name="tabla" value="rol">
				</form>
			</div> 
		</div>
	</div>
</div>

<script>
$('[name=cedula]').keyup(function (e) {
	var code = $(this).val(); 
	if(/^[0-9]+$/.test(code)){
		$.post('validaciones.php', {'cedula':code}, function(data) {
			if(data=='NO'){$("#cedula").addClass("has-error");}
			else $("#cedula").removeClass("has-error");
		});
	}
	else $("#cedula").addClass("has-error");
});

function validar_fecha_inicio()
{
	var fecha_inicio = true;
	var dia_inicio = $('[name=fecha_inicio_dia]').val();
	var mes_inicio = $('[name=fecha_inicio_mes]').val();
	var año_inicio = $('[name=fecha_inicio_año]').val();

	if(dia_inicio > 31 || dia_inicio < 1 || año_inicio < 1900) {fecha_inicio = false;}
	if(mes_inicio == 2 && año_inicio%4 == 0 && dia_inicio > 29){fecha_inicio = false;}
	if(mes_inicio == 2 && año_inicio%4 != 0 && dia_inicio > 28){fecha_inicio = false;}
	if(mes_inicio == 4 || mes_inicio == 6 || mes_inicio == 9 || mes_inicio == 11){if(dia_inicio > 30) fecha_inicio = false;}

	return fecha_inicio;
}

function validar_fecha_fin()
{
	var fecha_fin = true;
	var dia_fin = $('[name=fecha_fin_dia]').val();
	var mes_fin = $('[name=fecha_fin_mes]').val();
	var año_fin = $('[name=fecha_fin_año]').val();

	if(dia_fin > 31 || dia_fin < 1 || año_fin < 1900) {fecha_fin = false;}
	if(mes_fin == 2 && año_fin%4 == 0 && dia_fin > 29){fecha_fin = false;}
	if(mes_fin == 2 && año_fin%4 != 0 && dia_fin > 28){fecha_fin = false;}
	if(mes_fin == 4 || mes_fin == 6 || mes_fin == 9 || mes_fin == 11){if(dia_fin > 30) fecha_fin = false;}

	return fecha_fin;
}

function fecha_inicio_invalida()
{
	$("#fecha_inicio_dia").addClass("has-error");
	$("#fecha_inicio_mes").addClass("has-error");
	$("#fecha_inicio_año").addClass("has-error");
}

function fecha_inicio_valida()
{
	$("#fecha_inicio_dia").removeClass("has-error");
	$("#fecha_inicio_mes").removeClass("has-error");
	$("#fecha_inicio_año").removeClass("has-error");
}

function fecha_fin_invalida()
{
	$("#fecha_fin_dia").addClass("has-error");
	$("#fecha_fin_mes").addClass("has-error");
	$("#fecha_fin_año").addClass("has-error");
}

function fecha_fin_valida()
{
	$("#fecha_fin_dia").removeClass("has-error");
	$("#fecha_fin_mes").removeClass("has-error");
	$("#fecha_fin_año").removeClass("has-error");
}

$('[name=fecha_inicio_dia]').change(function(){if(validar_fecha_inicio()) fecha_inicio_valida();else fecha_inicio_invalida()});
$('[name=fecha_inicio_mes]').change(function(){if(validar_fecha_inicio()) fecha_inicio_valida();else fecha_inicio_invalida()});
$('[name=fecha_inicio_año]').change(function(){if(validar_fecha_inicio()) fecha_inicio_valida();else fecha_inicio_invalida()});
$('[name=fecha_fin_dia]').change(function(){if(validar_fecha_fin()) fecha_fin_valida();else fecha_fin_invalida()});
$('[name=fecha_fin_mes]').change(function(){if(validar_fecha_fin()) fecha_fin_valida();else fecha_fin_invalida()});
$('[name=fecha_fin_año]').change(function(){if(validar_fecha_fin()) fecha_fin_valida();else fecha_fin_invalida()});

function validar()
{
	var cedula_valida = true;
	var fecha_inicio = true;
	var fecha_fin = true;
	var fechas_correctas = true;
	var dia_inicio = $('[name=fecha_inicio_dia]').val();
	var mes_inicio = $('[name=fecha_inicio_mes]').val();
	var año_inicio = $('[name=fecha_inicio_año]').val();
	var dia_fin = $('[name=fecha_fin_dia]').val();
	var mes_fin = $('[name=fecha_fin_mes]').val();
	var año_fin = $('[name=fecha_fin_año]').val();

	if($("#cedula").hasClass("has-error")) cedula_valida = false;

	if(dia_inicio > 31 || dia_inicio < 1 || año_inicio < 1900) {fecha_inicio = false;}
	if(dia_fin != 0 && mes_fin != 0 && año_fin !=0)if(dia_fin > 31 || dia_fin < 1 || año_fin < 1900) {fecha_fin = false;}
	if(mes_inicio == 2 && año_inicio%4 == 0 && dia_inicio > 29){fecha_inicio = false;}
	if(mes_inicio == 2 && año_inicio%4 != 0 && dia_inicio > 28){fecha_inicio = false;}
	if(mes_fin == 2 && año_fin%4 == 0 && dia_fin > 29){fecha_fin = false;}
	if(mes_fin == 2 && año_fin%4 != 0 && dia_fin > 28){fecha_fin = false;}
	if(mes_inicio == 4 || mes_inicio == 6 || mes_inicio == 9 || mes_inicio == 11){if(dia_inicio > 30) fecha_inicio = false;}
	if(mes_fin == 4 || mes_fin == 6 || mes_fin == 9 || mes_fin == 11){if(dia_fin > 30) fecha_fin = false;}

	if(año_fin > 0 && año_inicio > año_fin) fechas_correctas = false; 
	if ( año_fin >0 && mes_fin > 0 && año_inicio == año_fin && mes_inicio >= mes_fin) fechas_correctas = false;

	if(!fecha_fin || !fecha_inicio || !cedula_valida || !fechas_correctas)alert("Uno o más campos inválidos!\nVerífiquelos antes de continuar.");
	return (fecha_fin && fecha_inicio && cedula_valida && fechas_correctas);
}

$("#agregar").click(function(){return confirm("¿Está seguro que desea continuar?")});
</script>